<template>
  <div class="foter">
    <div style="width:100%">
      <span
        v-for="(item, index) in tabList"
        :key="index"
        :class="[activePath==item.pathname?'mui-active':'',index]"
        class="foter-span"
      >
        <span v-if="item.pathname=='fhome'" @click="goPage(item.pathname)" style="display:block">
          <img v-if="$route.path=='/fhome'" class="iconimg" src="images/homeone.png" />
          <img v-else class="iconimg" src="images/hometwo.png" />
        </span>

        <span v-else-if="item.pathname=='fcard'" @click="goPage(item.pathname)" style="display:block">
          <span class="mui-badge mui-badge-danger nub-jiaobiao">{{$root.env.cardlength}}</span>
          <img v-if="$route.path=='/fcard'" class="iconimg" src="images/gouwucheone.png" />
          <img v-else class="iconimg" src="images/gouwuchetwo.png" />
        </span>
        <span v-else @click="goPage(item.pathname)" style="display:block">
          <img v-if="$route.path=='/fmine'" class="iconimg" src="images/wodeone.png" />
          <img v-else class="iconimg" src="images/wodetwo.png" />
        </span>
        <span class="mui-tab-label">{{ item.name }}</span>
      </span>
    </div>
    <!-- <nav class="mui-bar mui-bar-tab">
      <span
        v-for="(item, index) in tabList"
        :key="index"
        :class="[activePath==item.pathname?'mui-active':'',index]"
        class="mui-tab-item"
      >
        <span v-if="item.pathname=='fhome'" @click="goPage(item.pathname)">
          <img v-if="$route.path=='/fhome'" class="iconimg" src="images/homeone.png" />
          <img v-else class="iconimg" src="images/hometwo.png" />
        </span>

        <span v-else-if="item.pathname=='fcard'" @click="goPage(item.pathname)">
          <span class="mui-badge mui-badge-danger nub-jiaobiao">{{cardvalue}}</span>
          <img v-if="$route.path=='/fcard'" class="iconimg" src="images/gouwucheone.png" />
          <img v-else class="iconimg" src="images/gouwuchetwo.png" />
        </span>
        <span v-else @click="goPage(item.pathname)">
          <img v-if="$route.path=='/fmine'" class="iconimg" src="images/wodeone.png" />
          <img v-else class="iconimg" src="images/wodetwo.png" />
        </span>
        <span class="mui-tab-label">{{ item.name }}</span>
      </span>
    </nav> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      cardvalue:this.$root.env.cardlength,
      tabList: [
        {
          name: '首页',
          pathname: 'fhome'
        },
        {
          name: '购物车',
          pathname: 'fcard'
        },
        {
          name: '我的',
          pathname: 'fmine'
        }
      ],
      ts: this.newStore()
    }
  },
  created() {
    this.carList()
  },
  mounted() {
    // mui('.mui-bar-tab').on('click','.mui-tab-item', () => {
    //   alert('999')
    //   var id = this.getAttribute(index);
    //  this.goPage()
    // })
  },
  computed: {
    activePath() {
      return this.$route.name
    }
  },
  methods: {
    goPage(pathname) {
      this.$router.push({ name: pathname })
    },
    //购物车列表
    carList() {
      const res = {
        token: localStorage.getItem('token')
      }
      this.spost(this.ts, '/Carc/carList').then(ts => {
        if (ts.d.flag == '200') {
          this.$root.env.cardlength = ts.d.data.length
        }
      })
    }
  }
}
</script>

<style>
.iconimg {
  height: 20px;
  display: inline-block;
  width: 18px;
  margin: 0 auto;
  margin-bottom: 4px;
}
.nub-jiaobiao {
  position: absolute;
  bottom: 30px;
  left: 51%;
}
.foter{
      position: fixed;
    bottom: 0px;
    width: 100%;
    background: #fff;
    padding:5px 0;
}
.foter-span{
    display: inline-block;
    width: 33%;
    text-align: center;
}
</style>
